<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面</title>
    <link rel="icon" href="../img/favicon.gif" type="image/gif">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/base.css">
    <script>
        function init(){
            let nodes=document.querySelectorAll(".leftMenuImgs");
            Array.from(nodes).forEach((item)=>{
                item.addEventListener("click",(event)=>{
                    let node=event.target.parentNode.nextElementSibling;
                    if(node.hidden==true){
                        node.hidden=false;
                        item.classList.add("change");
                    }else{
                        node.hidden=true;
                        item.classList.remove("change");
                    }
                },false);
            });
        }
        window.addEventListener("load",init,false);
    </script>
</head>
<body>
    <main>
        <header class="head">logo</header>
        <nav class="topMenu">
            <ul class="topMenu_ul">
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs" id="tomMenu_img_first"></div>
                        <a class="a_menuClass" href="#">首页</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs" id="tomMenu_img_article"></div>
                        <a id="a_insertArticle" class="a_menuClass" href="#">写文章</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs" id="tomMenu_img_articleType"></div>
                        <a class="a_menuClass" href="#">文章类型</a>
                    </nav>
                </li>
                <li class="topMenu_li">
                    <nav>
                        <div class="topMenuImgs" id="tomMenu_img_config"></div>
                        <a class="a_menuClass" href="#">用户设置</a>
                    </nav>
                </li>
            </ul>
        </nav>
        <nav class="leftSide">
            <h2 style="text-align:center">文章类型</h2>
            <ul class="leftMenu_ul_level1">
                <li class="leftMenu_li_level1">
                    Java Core
                    <div class="leftMenuImgs"></div>
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">面向对象</li>
                    <li class="leftMenu_li_level2">多线程</li>
                </ul>
                <li class="leftMenu_li_level1">
                    Java Web
                    <div class="leftMenuImgs"></div>
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">Servlet3+</li>
                    <li class="leftMenu_li_level2">JSTL/EL</li>
                </ul>
                <li class="leftMenu_li_level1">
                    前端技术
                    <div class="leftMenuImgs"></div>
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">HTML5</li>
                    <li class="leftMenu_li_level2">CSS3</li>
                    <li class="leftMenu_li_level2">ECMAScript 6</li>
                </ul>
                <li class="leftMenu_li_level1">
                    心灵鸡汤
                    <div class="leftMenuImgs"></div>
                </li>
                <ul class="leftMenu_ul_level2" hidden>
                    <li class="leftMenu_li_level2">心情故事</li>
                </ul>
            </ul>
        </nav>
        <section class="main">main page</section>
        <nav class="rightSide">right menu</nav>
        <footer class="foot">info</footer>
    </main>
</body>
</html>